<template>
	<view class="main" id="main">
		<!--背景图-->
		<image id="background" :src="getSong.picUrl" mode="heightFix" />
		<view class="bg"></view>

		<!--歌词和光碟-->
		<swiper class="swiper">
			<swiper-item class="imgbox" item-id="">
				<!-- 光碟页 -->
				<image class="topimg" :class="getStatus ? 'playing' : 'pause'" src="../../static/cm2_play_needle_play-ip6@2x.png" mode="widthFix" lazy-load="true" />
				<view class="innerimg" :style="{ 'animation-play-state': getStatus ? 'running' : 'paused' }"><image :src="getSong.picUrl" mode="widthFix" lazy-load="true" /></view>
				<image class="outerimg" :style="{ 'animation-play-state': getStatus ? 'running' : 'paused' }" src="../../static/disc.png" mode="widthFix" lazy-load="true" />
				<view class="music_name">{{ getSong.name }}--{{ getSong.author }}</view>
			</swiper-item>
			<swiper-item class="lyric" item-id="">
				<!-- 歌词页 -->
				<scroll-view scroll-with-animation="true" scroll-y="true" class="scroll-Y" :scroll-top="scrolltop">
					<view class="" v-if="getSong.lyric.length">
						<block v-for="(item, index) in getSong.lyric" :key="index">
							<text class="lyricitem" :class="currentIndex == index ? 'currentLyric' : ''">{{ item[1] }}</text>
						</block>
					</view>
					<view v-else class="nolyric">暂无歌词</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<!--评论按钮，下载按钮等-->
		<view class="btnbox">
			<image class="" src="../../static/cm2_play_icn_love@2x.png" mode="widthFix" />
			<image class="" src="../../static/cm2_play_icn_dld@2x.png" mode="widthFix" />
			<image class="" src="../../static/cm2_play_icn_cmt_num@2x.png" mode="widthFix" />
			<image class="" src="../../static/cm2_play_icn_more@2x.png" mode="widthFix" />
		</view>

		<!--进度条-->
		<view class="progress">
			<view class="current">{{ currentTime | formDate }}</view>
			<slider
				class=""
				min="0"
				:max="duration"
				step="1"
				:value="value"
				activeColor="#BB2C08"
				backgroundColor="#e9e9e9"
				block-size="14"
				block-color="#ffffff"
				@change="moved"
				@changing="moved"
			></slider>
			<view class="end">{{ duration | formDate }}</view>
		</view>

		<!--控制组件-->
		<view class="controlbox">
			<view class="model" @click="changeModel">
				<block v-for="item in modeList" :key="item.id"><image v-if="model == item.id" class="" :src="item.icon" mode="widthFix" lazy-load="ture" /></block>
			</view>
			<view><image class="" @click="prevSong" src="../../static/cm2_play_btn_prev@2x.png" mode="widthFix" lazy-load="true" /></view>
			<view class="play_pause" @click="clickplay">
				<image class="" v-if="!getStatus" src="../../static/cm2_fm_btn_play@2x.png" mode="widthFix" lazy-load="true" />
				<image class="" v-else src="../../static/cm2_fm_btn_pause@2x.png" mode="widthFix" lazy-load="true" />
			</view>
			<view><image class="" @click="nextSong" src="../../static/cm2_fm_btn_next@2x.png" mode="widthFix" lazy-load="true" /></view>
			<view><image @click="showdrawer" class="" src="../../static/cm2_icn_list@2x.png" mode="widthFix" lazy-load="true" /></view>
		</view>

		<mydrawer ref="mydrawer">
			<view class="play-list-container">
				<view class="pl-action-panel">
					<view class="panel-mode">
						<text>歌曲列表：共{{ getList.length }}首</text>
					</view>
					<view style="margin-right: 40rpx;">
						<image src="../../static/cm2_playlist_icn_fav@2x.png" mode="widthFix" style="width: 36rpx" />
						收藏全部
					</view>
					<view @click="deleteAll"><image src="../../static/cm2_playlist_icn_delete@2x.png" mode="widthFix" style="width: 36rpx" /></view>
				</view>
				<view class="pl-content">
					<scroll-view scroll-y="true">
						<block v-for="(item, index) in getList" :key="index">
							<view class="pl-item" :class="getSong.id === item.id ? 'current' : ''">
								<view v-if="item.id === getSong.id" class="song-volume"><image src="../../static/cm2_icn_volume@2x.png" mode="widthFix" /></view>
								<view class="song-info" @click="playMusic(item.id, index)">
									<view class="ellipsis">
										<text class="songname">{{ item.name }}</text>
										<text class="singer">- {{ item.author }}</text>
									</view>
								</view>
								<view v-if="item.id === getSong.id" class="song-link"><image src="../../static/cm2_playlist_icn_link@2x.png" mode="widthFix" /></view>
								<view class="song-del" @click="delsong(index)"><image src="../../static/cm2_playlist_icn_dlt@2x.png" mode="widthFix" /></view>
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="pl-close" bindtap="_cancelDrawer">关闭</view>
			</view>
		</mydrawer>
	</view>
</template>

<script>
import { MusicRequest } from '../../api/music.js';
import { mapGetters } from 'vuex';
import MyDrawer from '../../components/mydrawer/mydrawer.vue';
export default {
	data() {
		return {
			music: {}, //当前播放的音乐对象
			model: 1, //播放模式
			currentTime: '00:00',
			value: 0, //当前进度条的值
			currentIndex: 0, //记录当前唱到的行号
			scrolltop: 0, //sroll滚动的距离
			audioCotext: {}, //audio对象
			duration: '00:00',
			//播放的三种模式
			modeList: [
				{
					id: 1,
					name: '列表循环',
					icon: '../../static/cm2_icn_loop@2x.png'
				},
				{
					id: 2,
					name: '单曲循环',
					icon: '../../static/cm2_icn_one@2x.png'
				},
				{
					id: 0,
					name: '随机播放',
					icon: '../../static/cm2_icn_shuffle@2x.png'
				}
			]
		};
	},
	comments: {
		MyDrawer
	},
	filters: {
		formDate(date) {
			//格式化时间过滤器
			var m = parseInt(date / 60);
			if (m < 10) {
				m = '0' + m;
			}
			var s = parseInt(date % 60);
			if (s < 10) {
				s = '0' + s;
			}
			return m + ':' + s;
		}
	},
	onLoad(option) {
		// 获取到当前播放的时间
		this.currentTime = this.$audioContext.currentTime;
		this.value = this.$audioContext.currentTime;
		// 当歌曲可以播放时
		this.$audioContext.onCanplay(() => {
			// 音频的时长
			this.duration = this.$audioContext.duration;
			// 滚动条
			this.scrolltop = 0; //重置
			this.currentIndex = 0;
		});
		// 当从其他页面跳转到该页面，歌曲已经在播放时，就不会执行$audioContext.onCanplay，所以要重新获取
		setTimeout(() => {
			this.duration = this.$audioContext.duration;
		}, 0);
		// 从vuex中获取到歌词
		var lyricArray = this.getSong.lyric;
		let length = lyricArray.length;

		// 播放进度更新时
		this.$audioContext.onTimeUpdate(() => {
			this.currentTime = this.$audioContext.currentTime;
			this.value = this.$audioContext.currentTime;
			if (length) {
				//获取歌词数字
				// //计算滚动条的位置
				if (this.currentIndex >= 8) {
					this.scrolltop = (this.currentIndex - 8) * 30;
				}
				//遍历所有歌词
				//最后一句歌词没有下一句,所以不需要跟下一句的时间做比较
				if (this.currentIndex == length - 2) {
					//判断当前的时间是否大于等于最后一句的时间
					if (this.currentTime >= lyricArray[length - 1][0]) {
						//正在唱最后一句
						this.currentIndex = length - 1;
					}
				} else {
					for (var i = 0; i < length - 1; i++) {
						//将每个歌曲进度都跟数组中的歌词比较,在当前歌词的时间到下一句歌词的时间范围之内
						if (this.currentTime >= lyricArray[i][0] && this.currentTime < lyricArray[i + 1][0]) {
							//设置正在播放的行号
							this.currentIndex = i;
						}
					}
				}
			}
		});
		// // 当歌曲播放结束时
		this.$audioContext.onEnded(() => {
			this.$store.commit('upDateStatus');
			this.scrolltop = 0; //重置
			this.currentIndex = 0;
			if (this.model == 2) {
				//当播放模式是循环单曲时
				this.$store.dispatch('getSong', this.getSong.id);
			} else {
				this.$store.commit('next', this.model);
			}
		});
	},
	onShow() {},
	computed: {
		...mapGetters(['getSong', 'getStatus', 'getTime', 'getList'])
	},
	methods: {
		// 点击播放暂停
		clickplay() {
			this.$store.commit('upDateStatus');
		},
		// 改变播放模式
		changeModel() {
			let model = this.model;
			model++;
			this.model = model % 3;
		},
		//拖动进度条触发的事件
		moved(e) {
			this.value = e.detail.value;
			this.$audioContext.currentTime = e.detail.value;
		},
		// 上一首
		prevSong() {
			this.$store.commit('prev', this.model);
		},
		// 下一首
		nextSong() {
			this.$store.commit('next', this.model);
		},
		// 打开播放列表
		showdrawer() {
			this.$refs.mydrawer.showDrawer();
		},
		// 点击播放音乐
		playMusic(id, index) {
			this.$store.dispatch('getSong', id);
			this.$store.commit('upDateIndex', index);
		},
		// 删除歌曲
		delsong(index) {
			this.$store.commit('delete', index);
		},
		// 删除列表中所有歌曲
		deleteAll(){
			uni.showModal({
			    title: '提示',
			    content: '您确认清空播放列表？',
			    success: (res) =>{
			        if (res.confirm) {
			            this.$store.commit("deleteAll")
			        } else if (res.cancel) {
			            
			        }
			    }
			})
		}
	}
};
</script>

<style lang="scss" scoped>
/* pages/music/music.wxss */
#main {
	position: relative;
	height: calc(100vh - 88upx);
	overflow: hidden;
	image {
		height: auto;
	}
	#background {
		height: 100vh;
		width: 1200upx;
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 0;
		transform: translateX(-50%);
		filter: blur(20upx);
	}
	.bg {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 0;
	}
	.swiper {
		height: 65vh;
		width: 100%;
		// background: darkcyan;
		swiper-item {
			height: 100%;
			position: relative;
			image {
				position: absolute;
				height: auto;
			}
		}
		.imgbox {
			.topimg {
				width: 165upx;
				height: auto;
				top: -40upx;
				left: 50%;
				transform-origin: 0 12%;
				z-index: 5;
				transition: 1s;
			}
			.playing {
				transform: rotate(5deg) translateX(-28%);
			}
			.pause {
				transform: rotate(-30deg) translateX(-28%);
			}
			.innerimg {
				position: absolute;
				z-index: 3;
				width: 380upx;
				height: 380upx;
				background-color: #f0ad4e;
				border-radius: 50%;
				top: 18vh;
				left: 50%;
				transform-origin: 0%;
				overflow: hidden;
				animation: rotate 24s linear infinite;
				image {
					width: 380upx;
				}
			}
			.outerimg {
				z-index: 4;
				width: 560upx;
				height: auto;
				border-radius: 50%;
				top: 10vh;
				left: 50%;
				transform-origin: 0%;
				animation: rotate 24s linear infinite;
			}
		}
		.music_name {
			color: white;
			position: absolute;
			bottom: 30upx;
			text-align: center;
			left: 50%;
			font-size: 30upx;
			transform: translateX(-50%);
			opacity: 0.6;
		}
	}
	.btnbox {
		z-index: 4;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 30upx;
		display: flex;
		image {
			width: 85upx;
			height: auto;
			margin: 0 20upx;
		}
	}
	.progress {
		position: absolute;
		margin-top: 140upx;
		display: flex;
		width: 100%;
		z-index: 2;
		view {
			flex: 1;
			height: 75upx;
			line-height: 75upx;
			color: white;
			opacity: 0.7;
		}
		.current {
			text-align: right;
		}
		.end {
			text-align: left;
		}
		slider {
			flex: 4;
			opacity: 0.7;
		}
	}
	.controlbox {
		position: absolute;
		margin-top: 260upx;
		z-index: 2;
		display: flex;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		image {
			width: 85upx;
			height: auto;
		}
		view {
			margin: 0upx 20upx;
			flex: 1;
		}
		.play_pause {
			flex: 1;
			position: relative;
			image {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -30upx;
				width: 120upx;
				height: auto;
			}
		}
		.model {
			position: relative;
			image {
				position: absolute;
				height: auto;
			}
		}
	}
}
@keyframes rotate {
	from {
		transform: rotate(0deg) translateX(-50%);
	}
	to {
		transform: rotate(360deg) translateX(-50%);
	}
}
.lyric {
	.scroll-Y {
		height: 100%;
		text {
			display: block;
			margin: 0 20upx;
			text-align: center;
			height: 60upx;
			line-height: 60upx;
			font-size: 30upx;
			color: white;
		}
		.currentLyric {
			color: $uni-bg-color;
		}
	}
}
.lyricitem {
	overflow: hidden;
}
.nolyric {
	text-align: center;
	height: 500upx;
	line-height: 500upx;
	color: $uni-bg-color;
}
/* 播放列表 */

.play-list-container {
	margin-top: -20rpx;
	border-radius: 30rpx 30rpx 0 0;
	background-color: #fff;
}

.pl-action-panel,
.pl-action-panel > view {
	display: flex;
	align-items: center;
}

.pl-action-panel {
	height: 75rpx;
	padding: 10rpx 15rpx;
	border-bottom: 2rpx solid #eee;
	font-size: 30rpx;
}

.panel-mode {
	flex: 1;
}

.pl-action-panel > view > image {
	margin-right: 10rpx;
}

.pl-content scroll-view {
	height: 585rpx;
}

.pl-item,
.pl-item > view {
	display: flex;
	align-items: center;
}

.pl-item {
	justify-content: space-between;
	height: 90rpx;
	margin-left: 15rpx;
	padding-right: 20rpx;
	/* border-bottom: 2rpx solid #eee; */
}

.song-volume {
	width: 32rpx;
	height: 32rpx;
	margin-right: 10rpx;
}

.song-info {
	flex: 1;
	overflow: hidden;
}

.song-info image {
	margin-right: 10rpx;
}

.pl-item:last-child {
	border-bottom-width: 0;
}

.ellipsis {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	white-space: nowrap; /*文本不换行*/
	text-overflow: ellipsis; /*设置超出部分显示...*/
	-o-text-overflow: ellipsis;
	overflow: hidden;
}

.songname {
	line-height: 0rpx;
	font-size: 28rpx;
	color: rgba(0, 0, 0, 1);
}

.singer {
	font-size: 24rpx;
	color: rgba(0, 0, 0, 0.7);
}

.pl-item.current .songname,
.pl-item.current .singer {
	color: #d33a31;
}

.song-del,
.song-link {
	width: 56rpx;
	height: 56rpx;
}

.pl-close {
	height: 75rpx;
	line-height: 75rpx;
	text-align: center;
	font-size: 30rpx;
	border-top: 2rpx solid #eee;
}
</style>
